<html>
    <head>
        <meta charset="utf-8">
        <!--title标签用于设置页面标题-->
        <title>电子表</title>
        <style>
            body{
                background: radial-gradient(white,lightgrey);
            }
            
            #clock-board{
                width: 400px;
                height: 400px;
                /*边框，5px宽度，solid表示实线，cyan表示青色*/
                border: 5px solid blue;
                /*margin设置为0 auto时，可以实现块元素水平居中*/
                margin: 0 auto;
                /*设置圆角半径，当设置为元素宽高的一半时，正好显示为一个圆*/
                border-radius: 50%;
            }
            
            /*选择 #clock-board元素中的所有p标签*/
            #clock-board p{
                /*字体大小*/
                font-size: 80px;
                /*字体颜色*/
                color: blue;
                /*文本对齐方式，center表示居中*/
                text-align: center;
                /*行高，将元素的行高设置为父元素的高度可以实现文本垂直居中*/

                /*line-height: 400px;*/
                /*上下外间距和左右外间距*/
                margin: 150px auto;
                border: 5px solid blue;
                height: 100px;
                width: 360px;
            }

        </style>
    </head>

    <body>
        <div id="clock-board">
            <p id="label">16:33:45</p>
        </div>
    </body>

    <script>
        //setInterval，开启一个定时器，每隔一段时间
        //执行一次代码
        setInterval(function(){
            update();
        },1000);


        function update(){
            //获得当前时间
            var now = new Date();

            //获得时间中的小时
            var hour = now.getHours();
            if(hour<10){
                hour = "0"+hour;
            }

            //获得分钟
            var minute = now.getMinutes();
            if(minute<10){
                minute = "0"+minute;
            }

            //获得秒数
            var second = now.getSeconds();
            if(second<10){
                second = "0"+second;
            }

            //把时分秒拼接成一个字符串。
            var result = hour+":"+minute+":"+second;

            //获得页面中id为label的元素(p标签)。
            var label =document.getElementById("label");

            //将事件结果显示在p标签中。
            label.textContent =result;
        }

        update();


    </script>

</html>